<template>
  <el-table
    class="egrid"
    :data="data"
    ref="grid"
    v-bind="tableBind"
    :row-class-name="tableRowClassName"
    v-on="$listeners"
  >
    <template v-for="tp in columnTypes">
      <el-table-column v-if="tp === 'expand'" type="expand" :key="tp">
        <template slot-scope="props">
          <slot name="expand" v-bind="props"></slot>
        </template>
      </el-table-column>
      <el-table-column v-else :type="tp" :key="tp"></el-table-column>
    </template>
    <el-table-column
      v-for="col in renderColumns"
      :key="col.label"
      v-bind="getColBind(col)"
      :show-overflow-tooltip="col.tooltip === undefined ? true : col.tooltip"
    >
      <template slot-scope="scope">
        <component
          :is="col.component"
          v-bind="getCptBind(scope, col)"
          v-on="col.listeners"
        >
        </component>
      </template>
    </el-table-column>
    <template v-if="slotAppend" slot="append">
      <slot name="append"></slot>
    </template>
  </el-table>
</template>

<script>
import ElTable from "element-ui/lib/table";
import ElTableColumn from "element-ui/lib/table-column";
import methods from "./methods";
import Text from "./text";

const BOOLEAN_KEYS = [
  "fit",
  "stripe",
  "border",
  "show-header",
  "highlight-current-row",
  "default-expand-all",
  "show-summary",
];

const COLUMN_PROPS = {
  align: "left",
  component: Text,
};

const TYPES = ["selection", "expand", "index"];

const COLUMN_KEY_MAP = {
  label: "label",
  prop: "prop",
};

export default {
  name: "Egrid",

  mixins: [methods],

  props: {
    data: {
      type: Array,
      lineHeightRow: String,
      default() {
        return [];
      },
    },

    columns: {
      type: Array,
      default() {
        return [];
      },
    },
    showRedBackGroud: {
      type: Boolean,
      default() {
        return false;
      },
    },
    columnType: [String, Array],

    columnKeyMap: Object,

    columnsProps: Object,

    columnsSchema: Object,

    columnsHandler: Function,

    slotAppend: Boolean,
  },

  computed: {
    // 处理 $attrs 里面 Boolean 类型的 prop 和统一 prop 命名
    tableBind() {
      const { $attrs } = this;
      const bind = {};
      Object.keys($attrs).forEach((key) => {
        const v = $attrs[key];
        const uniformKey = key.replace(/([A-Z])/, "-$1").toLowerCase();
        bind[key] = ~BOOLEAN_KEYS.indexOf(uniformKey) && v === "" ? true : v;
      });
      return bind;
    },

    renderColumns() {
      const {
        columns,
        columnKeyMap,
        columnsHandler,
        columnsProps: props,
        columnsSchema: schema,
      } = this;
      const map = Object.assign({}, COLUMN_KEY_MAP, columnKeyMap);
      const renderColumns = columns.map((col) => {
        const mix = (schema && schema[col[map.prop]]) || {};
        const it = Object.assign({}, COLUMN_PROPS, props, col, mix);
        it.label = it[map.label];
        it.prop = it[map.prop];
        return it;
      });
      return (columnsHandler && columnsHandler(renderColumns)) || renderColumns;
    },

    columnTypes() {
      const { columnType: type } = this;
      if (!type) return [];
      if (typeof type === "string" && ~TYPES.indexOf(type)) {
        return [type];
      } else if (Array.isArray(type)) {
        return type.filter((it) => ~TYPES.indexOf(it));
      } else {
        return [];
      }
    },
  },

  methods: {
    getColBind(col) {
      const bind = Object.assign({}, col);
      delete bind.component;
      delete bind.listeners;
      delete bind.propsHandler;
      return bind;
    },

    getCptBind({ row, column }, col) {
      const props = { row, col, column };
      const handler = col.propsHandler;
      return (handler && handler(props)) || props;
    },
    tableRowClassName({ row, rowIndex }) {
      if (this.showRedBackGroud) {
        // const delayTime = 1 * 24 * 60 * 60 * 1000// 1*天的毫秒数
        // const currentTime = new Date().getTime()
        // const orderTime = Date.parse(row.createTime.replace(/-/gi, '/'))
        // console.log(currentTime - orderTime > delayTime)
        // if ((currentTime - orderTime > delayTime) && row.shipmentsStatus === 'NOT_SHIP') {
        //   return 'activePurchaseCode'
        // }
        // return ''
        return row.activePurchaseCode ? "activePurchaseCode" : "";
      }
    },
  },

  components: {
    [ElTable.name]: ElTable,
    [ElTableColumn.name]: ElTableColumn,
  },
};
</script>
<style>
.el-table .activePurchaseCode {
  background: rgb(212, 28, 28);
}
</style>
